<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="box" class="one two three" title="hello" asd="asd" data-id="100" data-index="0">
        <span>123123</span>
    </div>
</body>
<script>
    var box = document.getElementById("box");

    // 元素节点的属性: 
    // 1. 元素节点是一个对象
    // 2. 对象存在描述该对象的属性和方法  box.innerText  box.getAttribute()  box.onclick

    console.log(box);
    console.dir(box);

    // 学习元素节点(对象)上的属性

    // innerHTML     获取和设置元素(非表单元素)内的html结构
    // innerText     获取和设置元素(非表单元素)内的文本结构
    // textContent   获取和设置元素(非表单元素)内的文本结构

    // outerHTML     获取和设置元素(非表单元素)本身及其内部的html结构
    // outerText     获取和设置元素(非表单元素)本身及其内部的text结构

    // value         获取和设置表单元素的value值

    // console.log(box.innerHTML);
    // console.log(box.outerHTML);
    // console.log(box.outerText);

    // box.innerHTML = "asdasd";
    // box.outerHTML = "asdasd";


    // className    获取和设置class名

    // 获取/设置  标签内的属性节点
    // console.log(box.getAttribute("class")); // 标签内有就可以获取 class="xxx"
    // box.setAttribute("class", "first second third");


    // 获取/设置  元素节点的属性
    console.log(box.className);  // 官方给定的
    // box.className = "first second third";


    // classList   返回元素内class名的集合
    // console.log(box.classList);

    // id     获取和设置元素的id名
    // console.log(box.id);
    // box.id = "BOX";


    // title  获取和设置元素的title
    // console.log(box.title);
    // box.title = "world";

    // tagName  获取元素的标签名  (判断元素类型)
    // console.log(box.tagName);
    // console.log(box.tagName === "DIV");
    // console.log(box.tagName.toLowerCase() === "div");

    // 关于自定义属性
    // console.log(box.asd);   // asd="asd" 标签内的自定义属性 (不符合h5的规范  data-xxx)

    // dataset  数据集 (标签内的自定义属性 data-xxx)
    // console.log(box.dataset);
    // console.log(box.dataset.id);
    // console.log(box.dataset.index);

    // box.dataset.id = "1";
    // box.dataset.index = "100";

    // style   获取和设置内联样式
    // 1. js操作dom元素改变样式时 都是通过内联样式实现的

    // 设置
    // box.style.width = "400px";
    // box.style.height = "400px";
    // box.style.backgroundColor = "red";

    // 获取  => style取值时只能获取内联样式 => 无法获取 内部 外部 默认
    // console.log(box.style.width);
    // console.log(box.style.height);
    // console.log(box.style.backgroundColor);



    // 下午 => 如何内部 外部 默认?







</script>

</html>